ExtJS এ Component Lifecycle হলো একটি কম্পোনেন্টের (যেমন, প্যানেল, গ্রিড, ফর্ম ইত্যাদি) জীবনচক্রের ধারাবাহিকতা। এটি একটি কম্পোনেন্ট তৈরির পর থেকে তার ধ্বংস হওয়া পর্যন্ত ঘটানো বিভিন্ন ইভেন্ট এবং ধাপগুলিকে বোঝায়। এর মধ্যে কম্পোনেন্টের ইনিশিয়ালাইজেশন, রেন্ডারিং, রেসাইজিং, ইন্টারঅ্যাকশন, এবং ধ্বংস প্রক্রিয়া অন্তর্ভুক্ত থাকে।
Component Lifecycle Overview
একটি ExtJS কম্পোনেন্ট সাধারণত নির্মাণ (Creation), রেন্ডারিং (Rendering), ইন্টারঅ্যাকশন (Interaction) এবং ধ্বংস (Destruction) এই চারটি প্রধান পর্যায়ে কাজ করে। প্রতিটি পর্যায়ে বিশেষ ফাংশনালিটি সম্পাদিত হয় এবং বিভিন্ন Lifecycle Hooks (লাইফসাইকেল হুকস) ব্যবহার করা হয়।
Component Lifecycle এর ধাপসমূহ
- Creation (নির্মাণ)
- কম্পোনেন্ট তৈরি করা হয় যখন
Ext.create()অথবাExt.Componentএর ইনস্ট্যান্স তৈরি করা হয়। initComponent()মেথডে কম্পোনেন্টের প্রাথমিক কনফিগারেশন সেটআপ করা হয়।
- কম্পোনেন্ট তৈরি করা হয় যখন
- Rendering (রেন্ডারিং)
- কম্পোনেন্ট রেন্ডার করা হয় DOM (Document Object Model) এ। এই সময়ে কম্পোনেন্টের UI উপাদান ব্যবহারকারীর ব্রাউজারে প্রদর্শিত হয়।
afterRender()মেথডে UI উপাদান রেন্ডার করার পরে অতিরিক্ত কার্যক্রম সম্পাদিত হয়।
- Interaction (ইন্টারঅ্যাকশন)
- ব্যবহারকারীরা কম্পোনেন্টের সাথে ইন্টারঅ্যাকশন শুরু করে (যেমন: ক্লিক, টেক্সট ইনপুট)।
onRender()এর মধ্যে কম্পোনেন্টের ইভেন্ট হ্যান্ডলিং মেথডের সাথে কাজ করা হয়।
- Destruction (ধ্বংস)
- কম্পোনেন্ট ধ্বংস হলে, তার সাথে সম্পর্কিত ইভেন্ট লিসেনার এবং অন্যান্য সম্পদ মুক্ত করা হয়।
destroy()মেথড ব্যবহার করে কম্পোনেন্ট ধ্বংস করা হয় এবং এর সম্পদ মুক্ত করা হয়।
Lifecycle Hooks (লাইফসাইকেল হুকস)
ExtJS তে বিভিন্ন লাইফসাইকেল হুকস থাকে যা কম্পোনেন্টের বিভিন্ন ধাপের মধ্যে কল হয়। এগুলি বিশেষ মেথড যা ডেভেলপারদের কম্পোনেন্টের জীবনচক্রের বিভিন্ন সময়ে অতিরিক্ত কার্যক্রম সম্পাদন করার সুযোগ দেয়।
১. initComponent()
- ব্যবহার: কম্পোনেন্ট তৈরি হওয়ার সময়, এটি প্রথমে কল হয়। এখানে কম্পোনেন্টের প্রাথমিক কনফিগারেশন এবং ইনিশিয়াল সেটআপ করা হয়।
- ফাংশনালিটি: কনফিগারেশন সেট করা, স্টোর সংযোগ, এবং অন্যান্য বিল্ট-ইন ফিচার কনফিগারেশন করা।
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
initComponent: function() {
// কম্পোনেন্টের জন্য কনফিগারেশন সেট
this.html = 'Hello, World!';
this.callParent(arguments); // প্যারেন্ট ক্লাসের initComponent মেথড কল করা
}
});
২. afterRender()
- ব্যবহার: এই মেথডটি রেন্ডারিং সম্পন্ন হওয়ার পরে কল হয়।
- ফাংশনালিটি: কম্পোনেন্টের UI উপাদান সম্পূর্ণভাবে রেন্ডার হওয়ার পরে অতিরিক্ত কার্যক্রম সম্পাদন করা।
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
afterRender: function() {
// রেন্ডারিং পরবর্তী কার্যক্রম
console.log('Component Rendered');
this.callParent(arguments);
}
});
৩. onRender()
- ব্যবহার: কম্পোনেন্টের DOM (HTML) উপাদান সম্পূর্ণ রেন্ডার হওয়ার পর কল হয়।
- ফাংশনালিটি: কম্পোনেন্টের ইভেন্ট লিসেনার বা অন্যান্য কার্যক্রম শুরু করা।
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
onRender: function() {
// UI রেন্ডারিং শেষে কার্যক্রম
console.log('Component DOM Rendered');
this.callParent(arguments);
}
});
৪. destroy()
- ব্যবহার: যখন কম্পোনেন্ট ধ্বংস হয়, এটি কল হয়। কম্পোনেন্ট ধ্বংসের সময় ব্যবহৃত সম্পদ, ইভেন্ট লিসেনার ইত্যাদি মুক্ত করা হয়।
- ফাংশনালিটি: সমস্ত প্রক্রিয়া বন্ধ করা, ইভেন্ট লিসেনার মুছে ফেলা, এবং অন্যান্য পরিষ্কার কার্যক্রম।
উদাহরণ:
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
destroy: function() {
// ধ্বংসের সময় অতিরিক্ত কার্যক্রম
console.log('Component Destroyed');
this.callParent(arguments);
}
});
ExtJS কম্পোনেন্ট লাইফসাইকেল এভেন্টগুলোর সারাংশ
| Life Cycle Hook | Description |
|---|---|
| initComponent() | কম্পোনেন্ট তৈরির সময় কল হয়। ইনিশিয়াল কনফিগারেশন এবং সেটআপ করা হয়। |
| afterRender() | রেন্ডারিং শেষ হওয়ার পরে কল হয়। UI উপাদান সম্পূর্ণরূপে রেন্ডার হওয়ার পরে অতিরিক্ত কার্যক্রম সম্পাদিত হয়। |
| onRender() | DOM রেন্ডারিং সম্পন্ন হওয়ার পরে কল হয়। UI এলিমেন্ট ইন্টারঅ্যাকশন শুরু হওয়ার সময়। |
| destroy() | কম্পোনেন্ট ধ্বংস হলে কল হয়। সমস্ত সম্পর্কিত সম্পদ, ইভেন্ট লিসেনার এবং অন্যান্য উপাদান মুক্ত করা হয়। |
সারাংশ
ExtJS এর Component Lifecycle এবং Lifecycle Hooks ডেভেলপারদের কম্পোনেন্টের বিভিন্ন ধাপে অতিরিক্ত কার্যক্রম পরিচালনা করার সুযোগ দেয়। কম্পোনেন্ট তৈরির সময় কনফিগারেশন থেকে শুরু করে ধ্বংস হওয়া পর্যন্ত প্রতিটি ধাপে লাইফসাইকেল হুকস কাজ করে, যা অ্যাপ্লিকেশনের পারফরম্যান্স এবং রক্ষণাবেক্ষণকে সহজ করে তোলে। initComponent(), afterRender(), onRender(), এবং destroy() এর মতো লাইফসাইকেল হুকস আপনাকে আরো নিয়ন্ত্রিত এবং কার্যকর কম্পোনেন্ট ডেভেলপমেন্টের সুযোগ প্রদান করে।
Read more
